import React from 'react'
import { Button, LightMode, Box, useColorMode, useColorModeValue, Text } from '@chakra-ui/core';

// 4
// function App() {
//   const {colorMode, toggleColorMode} = useColorMode();
//   return <Box w="200px" h="100px" bgColor={colorMode === 'light' ? 'tomato' : 'skyblue'}>
//       <Text> 当前颜色模式是 { colorMode}</Text>
//       <Button onClick={toggleColorMode}>切换颜色模式</Button>
//     </Box>
// }

// export default App

function App() {
  const {colorMode, toggleColorMode} = useColorMode();
  const bgColor =  useColorModeValue('tomato', 'skyblue')
  return <Box w="200px" h="100px" bgColor={bgColor}>
      <Text> 当前颜色模式是 { colorMode}</Text>
      <LightMode>
        <Button onClick={toggleColorMode}>切换颜色模式</Button>
      </LightMode>
      {/* <Button onClick={toggleColorMode}>切换颜色模式</Button> */}
    </Box>
}

export default App